import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home: ScrollControllerTestRoute(),
      home: const MyHomePage(
        title: 'demo',
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Column(
        // children 这里加 const 会报错，buildTwoListView不是const
        children: const <Widget>[
          ListTile(title: Text("商品列表")),
          Expanded(
            child: NavWidget(),
          ),
        ],
      ),
    );
  }
}

var c1 = const Color(0xffdc380d); //如果颜色固定可以直接使用整数值 顺序： ARGB
//颜色是一个字符串变量
var c = "dc380d";
// int.parse(c, radix: 16) 将字符串转换为16进制整数，等于0xdc380d
var c2 = Color(int.parse(c, radix: 16) | 0xFF000000); //通过位运算符将Alpha设置为FF
var c3 = Color(int.parse(c, radix: 16)).withAlpha(255); //通过方法将Alpha设置为FF

// 实现一个背景颜色和Title可以自定义的导航栏，并且背景色为深色时我们应该让Title显示为浅色；背景色为浅色时，Title 显示为深色。要实现这个功能，我们就需要来计算背景色的亮度，然后动态来确定Title的颜色。Color 类中提供了一个`computeLuminance()`方法，它可以返回一个[0-1]的一个值，数字越大颜色就越浅。

class NavBar extends StatelessWidget {
  final String title;
  final Color color; //背景颜色

  const NavBar({
    Key? key,
    required this.color,
    required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints(
        minHeight: 52,
        minWidth: double.infinity,
      ),
      decoration: BoxDecoration(
        color: color, //背景颜色
        boxShadow: const [
          // 阴影
          BoxShadow(
            color: Colors.black26,
            offset: Offset(0, 3),
            blurRadius: 3,
          ),
        ],
      ),
      child: Text(
        title,
        style: TextStyle(
          fontWeight: FontWeight.bold,
          // 根据背景色亮度来确定Title颜色
          color: color.computeLuminance() < 0.5 ? Colors.white : Colors.black,
        ),
      ),
      alignment: Alignment.center,
    );
  }
}

class NavWidget extends StatelessWidget {
  const NavWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用Colors.blue.shade300，需要删除children中的const
    return Column(children: <Widget>[
      //背景为蓝色，则title自动为白色
      NavBar(color: Colors.blue.shade300, title: "标题"),
      const SizedBox(height: 20),
      //背景为白色，则title自动为黑色
      const NavBar(color: Color(0xffdddddd), title: "标题"),
      const SizedBox(height: 20),
      const NavBar(color: Colors.green, title: "标题"),
    ]);
  }
}

// `MaterialColor`是实现Material Design中的颜色的类，它包含一种颜色的10个级别的渐变色。`MaterialColor`通过"[]"运算符的索引值来代表颜色的深度，有效的索引有：50，100，200，…，900，数字越大，颜色越深。`MaterialColor`的默认值为索引等于500的颜色。举个例子，`Colors.blue`是预定义的一个`MaterialColor`类对象，
// 通过Colors.blue.shade300或者Colors.blue[300]可以获取深度为300的颜色。